<template>
  <div class="add-task" :class="{ isAddTask: isAddTask }">
    <img src="@/assets/img/icon/circle.svg" alt="" v-if="isAddTask" />
    <img src="@/assets/img/icon/plus.svg" alt="" v-else />
    <input
      type="text"
      placeholder="添加任务"
      @focus="onStartAddTask"
      @blur="onFinishAddTask"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAddTask: false,
    };
  },
  methods: {
    onStartAddTask() {
      this.isAddTask = true;
    },
    onFinishAddTask() {
      this.isAddTask = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.add-task {
  padding: 15px 0;
  display: flex;
  border-bottom: 1px solid #e5e5e5;

  img {
    width: 1.5rem;
    margin-right: 10px;
    color: rgba(0, 0, 0, 0.5);
  }

  input {
    outline-style: none;
    border: none;
    width: 100%;
    font-size: 1.1rem;
    color: rgba(0, 0, 0, 0.8);
  }

  &:isaddtask {
    border-bottom: 1px solid blue;
  }
}
</style>
